<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>

		<link rel="stylesheet" type="text/css" href="boot/dist/css/bootstrap.css" />
		<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.css" />
		<link rel="stylesheet" type="text/css" href="css/about.css" />

		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="boot/dist/js/bootstrap.bundle.min.js"></script>
		<script src="js/popper.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="boot/dist/js/bootstrap.js"></script>


	</head>
	<body>

		<!-- 头部区域 -->
		<header>
			<div class="container  py-3 d-flex  justify-content-between flex-md-row flex-column">
				<ul class="list-unstyled d-flex mx-md-0 mx-auto">
					<li>
						<a href="#" class="fa fa-user ">
							<i class="text-muted">Login</i>
						</a>
					</li>
					<li class="mx-3">
						<a href="#" class="fa fa-pencil">
							<i class="text-muted">Register</i>
						</a>
					</li>
					<li>
						<a href="#" class="fa fa-cart-plus">
							<i class="text-muted">Checkout</i>
						</a>
					</li>
				</ul>

				<ol class="list-unstyled d-flex mx-md-0 mx-auto ">
					<li class="mx-3">
						<a href="#" class="fa fa-heart ">
							<i class="text-muted">Wishlist</i>
						</a>
					</li>

					<li>
						<a href="#" class="fa fa-angle-down ">
							<i class="text-muted">USD</i>
						</a>
					</li>
				</ol>

			</div>

			<!-- LOGO图区域 -->
			<div class="" style="background-image: url(images/header_bg.jpg);">

				<div class=" " style="background-color: rgba(0,0,0,0.8);">

					<div class="container py-4">

						<ul class="d-flex justify-content-between align-items-center flex-md-row flex-column mb-0 pl-0">

							<li class="">
								<a href="#"><img src="images/logo.png" class="w-100"></a>
							</li>

							<li class="form_qu">
								<form class="form-control d-flex justify-content-between " style=" height: 50px; padding-top: 4px; padding-right: 2px;">
									<input type="text" placeholder="Search" class="border-0" style="outline: none;">
									<button type="" class="border-0 text-muted btn" style="background-color: #E4606D; width: 55px; height: 40px; "><i
										 class="fa fa-search text-white"></i></button>

								</form>
							</li>
						</ul>

					</div>


				</div>

			</div>

			<!-- 中部分栏部分 -->

			<div class="w-100 nav_tou " style="background-color: #E4606D;">

				<div class="navbar navbar-expand-md p-0">
					<button type="button " class="navbar-toggler bg-white ml-auto" data-toggle="collapse" data-target="#meu" style="color: white;">
						<i class="fa fa-bars " style="background-color: #E4606D;"></i>
					</button>


					<div class="collapse navbar-collapse " id="meu">
						<ul class=" list-unstyled d-flex text-center mx-auto justify-content-around justify-content-center navbar-nav "
						 style="">
							<li class="nav-item">
								<a href="index.html" class="nav-link ">Home</a>
							</li>
							<li class="nav-item ">
								<a href="#" class="nav-link defoult">About</a>
							</li>
							<li class="nav-item  ">
								<a href="services.html" class="nav-link">Services</a>
							</li>
							<li class="nav-item  ">
								<a href="gallery.html" class="nav-link">Gallery</a>
							</li>
							<li class="nav-item  ">
								<a href="blog.html" class="nav-link">Blog</a>
							</li>
							<li class="nav-item  ">
								<a href="shop.html" class="nav-link">Shop</a>
							</li>
							<li class="nav-item  ">
								<a href="contact.html" class="nav-link">Contact</a>
							</li>
							
						</ul>
					</div>

				</div>
			</div>


		</header>

		<main>
			<div class=" py-5 w-100 " style="background-color: gainsboro;">
				<div class="container text-center">
					<h2 class="m-0" style="color: #E4606D;">About</h2>
					<hr class="" style="width: 105px; background-color: #E4606D; margin-top: 1px;" />
					<hr class="" style="width: 65px; background-color: #E4606D; margin-top: -12px" />
					<p style="color: #E4606D;">Home<i class="text-dark"> / About</i></p>
				</div>
			</div>

			<!-- 中部区域的介绍部位 -->
			<div class="container " style="">
				<ul class="row mt-5 list-unstyled">
					<li class="col-md-6 col-12  overflow-hidden p-0">
						<img src="images/about.jpg" class="w-100 nav_da" height="" />
					</li>
					<li class="col-md-6 col-12 text-md-left text-sm-center mt-sm-4 ">
						<p class="font-weight-bold" style="font-size: 30px; color:  #E4606D;">Welcome <i class="" style="font-size: 30px; color: black;">To
								Hand Made</i></p>

						<p class="" style="font-size: 14px; color: gray;">It is a long established fact that a reader will be distracted
							by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a
							more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look
							like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their
							default model text, and a search for 'lorem ipsum' will uncover
						</p>

						<span style="font-size: 16px; color: gray;">Lorem Ipsum as their default model text, and a search for 'lorem
							ipsum' will uncover many web sites still in their infancy.</span>

						<div class="d-flex justify-content-md-start justify-content-center ">
							<a href="#" class="btn_jie text-center " style=" ">READ MORE</a>
						</div>

					</li>
				</ul>
			</div>

			<!-- 中部的选项卡部分 -->
			<div class="" style="background-image: url(./images/choose_bg.jpg); background-repeat: repeat;">

				<div class="container">

					<ul class="row m-0 ">


						<li class="col-lg-5 col-md-12   py-5">



						</li>


						<li class="col-lg-7 col-md-12 justify-content-center    py-5">

							<p class="font-weight-bold" style="font-size: 25px; color:  #E4606D;">Why<i class="font-weight-bold" style="font-size: ; color: black;">Choose
									Us</i></p>

							<div id="example">

								<div class="card">

									<div class="card-header">
										<button class="btn w-100 text-left  btn-link" data-toggle="collapse" data-target="#menu1">
											Respecting Your Time<span class="add"></span>
										</button>
									</div>

									<div class="card-body yy collapse show" data-parent="#example" id="menu1">
										Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et do
										lore magna aliqua.Lonsectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
									</div>

								</div>


								<div class="card">

									<div class="card-header">
										<button class="btn w-100 text-left   btn-link" data-toggle="collapse" data-target="#menu2">
											Latest In Technology<span class="out"></span>
										</button>
									</div>

									<div class="card-body collapse yy" data-parent="#example" id="menu2">
										Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et do
										lore magna aliqua.Lonsectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
									</div>

								</div>


								<div class="card">

									<div class="card-header">
										<button class="btn w-100 text-left   btn-link" data-toggle="collapse" data-target="#menu3">
											Professional Staff<span class="out"></span>
										</button>
									</div>

									<div class="card-body collapse yy " data-parent="#example" id="menu3">
										Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et do
										lore magna aliqua.Lonsectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
									</div>

								</div>

								<div class="card">

									<div class="card-header">
										<button class="btn w-100 text-left   btn-link" data-toggle="collapse" data-target="#menu4">

											Free Home Dilevery<span class="out"></span>
										</button>
									</div>

									<div class="card-body collapse yy " data-parent="#example" id="menu4">
										Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et do
										lore magna aliqua.Lonsectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
									</div>

								</div>


								<div class="card">

									<div class="card-header">
										<button class="btn w-100 text-left   btn-link" data-toggle="collapse" data-target="#menu5">

											High Quality<span class="out"></span>
										</button>
									</div>

									<div class="card-body collapse yy " data-parent="#example" id="menu5">
										Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et do
										lore magna aliqua.Lonsectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
									</div>

								</div>

							</div>

							<script type="text/javascript">
								$(function() {

									$('.collapse').on('hidden.bs.collapse', function() {


										$(this).prev().find('span').prop('class', 'add');

									})


									$('.collapse').on('shown.bs.collapse', function() {


										$(this).prev().find('span').prop('class', 'out');

									})


								})
							</script>


						</li>


					</ul>

				</div>


			</div>

			<!-- 中部三个人物的介绍区域 -->
			<div class="row w-100 m-0 " style="background-image: url(images/customer_bg.jpg); background-size: cover;">

				<div class="col-12  py-5 " style="background-color: rgba(0,0,0,0.8); ">

					<span class="font-weight-bold text-center d-block text-center mb-4" style="color:  #E4606D; font-size: 30px;">Our<i
						 class="" style="color: white;">Happy Customers</i></span>

					<div class="container">

						<ul class="row pl-0">

							<li class="col-md-4 col-12   py-5 text-center">
								<a href="#"><img src="images/customer1.png" class=""></a>

								<span class="font-weight-bold mb-2 text-center d-block text-center " style="color:  #E4606D; font-size: 20px; ">Hilpton
									Broad</span>

								<p class="text-white" style="">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots
									in a piece of cla ssical Latin literature from 45 BC, making it over 2000 years old.
								</p>

							</li>

							<li class="col-md-4 col-12   py-5 text-center">
								<a href="#"><img src="images/customer2.png" class=""></a>

								<span class="font-weight-bold mb-2 text-center d-block text-center " style="color:  #E4606D; font-size: 20px; ">Hilpton
									Broad</span>

								<p class="text-white" style="">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots
									in a piece of cla ssical Latin literature from 45 BC, making it over 2000 years old.
								</p>

							</li>

							<li class="col-md-4 col-12   py-5 text-center">
								<a href="#"><img src="images/customer3.png" class=""></a>

								<span class="font-weight-bold mb-2 text-center d-block text-center " style="color:  #E4606D; font-size: 20px; ">Hilpton
									Broad</span>

								<p class="text-white" style="">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots
									in a piece of cla ssical Latin literature from 45 BC, making it over 2000 years old.
								</p>

							</li>
						</ul>

					</div>


				</div>
			</div>


			<!-- 中部5个轮播图区域 -->
			<div class="w-100 " style="background-color: #E4606D;">

				<div class="container">

					<ul class="row d-flex justify-content-center justify-content-sm-center text-center m-0 pl-0">
						<li class="col-12  py-4 ">

							<span class="font-weight-bold text-center d-block text-center " style="color: white; font-size: 30px;">Our
								Clients</span>

						</li>
						<li class="col-md-2  col-12  py-4 ">
							<a href="#"><img src="./images/partner1.png"></a>
						</li>
						<li class="col-md-2 col-12  py-4 ">
							<a href="#"><img src="./images/partner2.png"></a>
						</li>
						<li class="col-md-2 col-12  py-4 ">
							<a href="#"><img src="./images/partner3.png"></a>
						</li>
						<li class="col-md-2 col-12  py-4 ">
							<a href="#"><img src="./images/partner4.png"></a>
						</li>
						<li class="col-md-2 col-12  py-4">
							<a href="#"><img src="./images/partner5.png"></a>
						</li>
					</ul>

				</div>

			</div>
		</main>

		<!-- 尾部的区域footer -->
		<footer class="">

			<!-- 尾部的导航栏区域 -->
			<div class="" style=" background-color: black;">

				<div class="container">

					<ul class="row m-0 pl-0">
						<li class="col-lg-4 col-md-6 col-12   py-5" style="background-color: black;">

							<img src="images/logo.png" class="">

							<p class="text-white  mt-4" style="font-size: 18px;">It is a long established fact that a reader will be
								distracted by the readable content of a page when looking at its layout.</p>



						</li>
						<li class="col-lg-2 col-md-6 col-12 " style="background-color: black;">
							<p class=" font-weight-bold mt-5" style="font-size: 19px; margin: 0px; color:  #E4606D;">Help</p>


							<div class="text-white mt-3 footer_text">
								<a href="#">
									<p>Your Beer</p>
								</a>
								<a href="#">
									<p>Customer Service</p>
								</a>
								<a href="#">
									<p>Contact</p>
								</a>
								<a href="#">
									<p>Recent Orders</p>
								</a>

							</div>


						</li>
						<li class="col-lg-2 col-md-6 col-12  py-5" style="background-color: black; margin: 0px;">
							<p class=" font-weight-bold " style="font-size: 19px; margin: 0px; color:  #E4606D;">Links</p>

							<div class="text-white mt-3 footer_text">
								<a href="#">
									<p>Home</p>
								</a>
								<a href="#">
									<p>Shop</p>
								</a>
								<a href="#">
									<p>404 Page</p>
								</a>
								<a href="#">
									<p>Login</p>
								</a>
							</div>

						</li>
						<li class="col-lg-4 col-md-6 col-12 py-5 " style="background-color: black;">

							<p class=" font-weight-bold " style="font-size: 19px; margin: 0px; color:  #E4606D;">Our Information</p>

							<div class="">
								<i class="fa fa-map-marker  mt-3" style="color:  #E4606D;"></i>
								<p class="d-inline-block ml-2" style="font-size: 16px; margin: 0px; color: white;">787 Lakeview St. Marion, NC
								</p>
								<p class="text-white">&nbsp;&nbsp;&nbsp; 28752 </p>
								<p></p>

							</div>

							<div class="">
								<i class="fa fa-phone t mt-3" style="color:  #E4606D;"></i>
								<p class="d-inline-block ml-2" style="font-size: 16px; margin: 0px; color: white;">+1800123654789 </p>
								<p class="text-white">&nbsp;&nbsp;&nbsp; +1800123456788 </p>
								<p></p>

							</div>

							<div class="">
								<i class="fa fa-envelope mt-3" style="color:  #E4606D;"></i>
								<p class="d-inline-block ml-2" style="font-size: 16px; margin: 0px; color: white;">Support@Handmade.Net</p>
								<p></p>

							</div>
						</li>
					</ul>

				</div>

			</div>


			<!-- 尾部的底部介绍区域-->
			<ul class="row m-0 p-0">
				<li class="col-md-6 col-12 py-3 text-center " style="background-color:#E4606D ;">
					<p class="text-white mt-2">Copyrights © 2018 All Rights <a href="#" style="color: blue;" class="a_se">Reserved</a>
						by Himanshusofttech</p>
				</li>

				<li class="col-md-6 col-12 text-center py-3 " style="background-color:#E4606D ;">
					<i class="fa fa-facebook text-white d-block mt-3">
						<i class="fa fa-twitter ml-3"></i>
						<i class="fa fa-google-plus ml-3"></i>
						<i class="fa fa-pinterest-p ml-3"></i>
						<i class="fa fa-linkedin ml-3"></i>
					</i>
				</li>
			</ul>
		</footer>
	</body>
</html>
